<template>
    <div class="common-layout">
        <el-container>
            <el-header>
                <TopHeader @changeCollapse="getVal" />
            </el-header>
            <el-container>
                <el-aside width="fit-content">
                    <AsideMenu :defaultActive="defaultActive" />
                </el-aside>
                <el-main>
                    <el-breadcrumb separator="/">
                        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                        <template v-if="targetRouterName">
                            <el-breadcrumb-item :to="targetRouterPath">{{ targetRouterName
                            }} </el-breadcrumb-item>
                            <el-breadcrumb-item>{{ targetSubRouterName }}</el-breadcrumb-item>
                        </template>
                    </el-breadcrumb>

                    <router-view></router-view>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script setup lang="ts">
import AsideMenu from '@/components/AsideMenu.vue';
import TopHeader from '@/components/TopHeader.vue';
import { provide, ref, watch } from 'vue';
import { useRoute } from 'vue-router';

const route = useRoute()

const defaultActive = ref("/index")
const targetRouterPath = ref("/ums")
const targetRouterName = ref("权限")
const targetSubRouterName = ref("用户列表")

watch(
    () => route.path,
    (val) => {
        defaultActive.value = val
        targetRouterPath.value = route.meta.targetRouterPath as string
        targetRouterName.value = route.meta.targetRouterName as string
        targetSubRouterName.value = route.meta.targetSubRouterName as string
    }, {
    immediate: true
}
)

const flag = ref(false)

provide("menuCollapse", flag)

const getVal = () => {
    flag.value = !flag.value
}
</script>

<style scoped lang="less">
.el-main {
    padding: 0;
}

.el-breadcrumb {
    top: 70px;
    position: fixed;
    width: 100%;
    z-index: 999;
    background-color: #fff;
    padding: 15px 20px;
    border-bottom: 1px solid #eee;
    
}

.el-header {
    background-color: #409eff;
    height: 70px;
}

.el-aside {
    background-color: #2e3e52;
    height: calc(100vh - 70px);

    &::-webkit-scrollbar {
        width: 0;
    }
}

.el-container {
    height: 100vh;
    overflow: auto;
}
</style>